<template>
  <a-modal :width="width" title="查重" :visible="checkVisible" @ok="" @cancel="checkVisible = false" :footer="null">
    <a-row :span="24">
      <a-col :span="4">
        <a-select default-value="customerName" @change="chooseCheckType">
          <a-select-option value="customerName">按客户名称</a-select-option>
          <!--<a-select-option value="mobile">按手机号</a-select-option>-->
        </a-select></a-col
      >
      <a-col :span="20">
        <a-input-search
          placeholder=""
          v-model="queryParam"
          enter-button="查询"
          size="default"
          @keyup.enter.native="onSearch"
          @search="onSearch"
      /></a-col>
    </a-row>

    <a-table
      v-if="customerList.length > 0"
      style="margin-top: 15px; border: 1px solid #ebeef5"
      :pagination="false"
      :columns="columns"
      :data-source="customerList"
    >
      <template slot="customerName" slot-scope="text, record">
        <a-tooltip placement="top">
          <template slot="title">
            <span>{{ record.customerName }}</span>
          </template>
          <span class="ellipsis"
            ><a @click="() => handleViewDrawerAll(record)">{{ record.customerName }}</a></span
          >
        </a-tooltip>
      </template>
    </a-table>
  </a-modal>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import CrmCustomerModalDrawer from '../modules/CrmCustomerModal__Style#Drawer'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  name: 'CheckDoub',
  props: {},
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    CrmCustomerModalDrawer,
  },
  data() {
    return {
      columns: [
        {
          title: '客户名称',
          dataIndex: 'customerName',
          key: 'customerName',
          ellipsis: true,
          scopedSlots: { customRender: 'customerName' },
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          key: 'createTime',
          width: 200,
          ellipsis: true,
        },
        {
          title: '客户经理',
          dataIndex: 'ownerUserId_dictText',
          key: 'ownerUserId_dictText',
          ellipsis: true,
        },
        {
          title: '所属BU',
          dataIndex: 'bu_dictText',
          key: 'bu_dictText',
          ellipsis: true,
        },
        {
          title: '最后跟进时间',
          dataIndex: 'lastTime',
          key: 'lastTime',
          width: 200,
          ellipsis: true,
        },
      ],
      customerList: [],
      width: 800,
      checkVisible: false,
      checkType: 'customerName',
      queryParam: '',
      url: {
        duplicateCheckingCrmCustomer: '/online/api/duplicateCheckingCrmCustomer',
        list: '/online/api/pagingCrmCustomer',
      },
    }
  },
  components: {},
  created() {},
  methods: {
    chooseCheckType(e) {
      this.checkType = e
      console.log(e)
    },
    show() {
      this.queryParam = ''
      this.customerList = []
      this.checkVisible = true
    },
    onSearch(value) {
      if(!value){
        this.$message.warn('请输入后查询!')
        return false
      }
      httpAction(this.url.duplicateCheckingCrmCustomer, { customerName: value }, 'post').then((res) => {
        if (res.success) {
          this.customerList = res.result.records || []
          if(res.result.records.length == 0){
            this.$message.warn('暂无数据!')
          }
        }
      })
    },
    handleViewDrawerAll(record) {
      let therecord = record
      therecord.isEditCustomer = false
      this.$emit('handleViewDrawerAll', therecord)
    },
  },
}
</script>

<style lang="less" scoped>
/deep/ .ant-input {
  border-radius: 0;
}
/deep/ .ant-select {
  width: 100%;
}
/deep/ .ant-select-selection {
  border-radius: 0;
}
/deep/ .ant-modal-header {
  border-bottom: 1px solid #e8e8e8;
}
/deep/ .ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
  padding: 10px 15px;
}
/deep/ .ant-modal-mask {
  z-index: 96 !important;
}
/deep/ .ant-modal-wrap {
  z-index: 96 !important;
}
</style>